<template>
	<view>
		<view class="change-plan-limit">
			<view class="plan-option">
				<u-section title="计划名称" :arrow="false" :bold="false" :show-line="false">
					<view slot="right">
						<u-input v-model="addPlanData.planName" type="text" input-align="right" />
					</view>
				</u-section>
			</view>
			<view class="plan-option">
				<u-section title="描述计划" :bold="false" :show-line="false">
					<view slot="right">
						<u-input v-model="addPlanData.planDescription" type="text" input-align="right" />
					</view>
				</u-section>
			</view>
			<view class="plan-option">
				<u-section title="每日开始时间" :bold="false" :show-line="false">
					<view slot="right">
						 <picker mode="time" value="12:00" start="00:00" end="24:00" @change="changeStartTime">
						    <view class="picker">
						      {{addPlanData.startTime}}
						    </view>
						  </picker>
					</view>
				</u-section>
			</view>
			<view class="plan-option">
				<u-section title="每日结束时间" :bold="false" :show-line="false" sub-title="">
					<view slot="right">
						 <picker mode="time" value="12:00" start="00:00" end="24:00" @change="changeEndtTime">
						    <view class="picker">
						      {{addPlanData.endTime}}
						    </view>
						  </picker>
					</view>
				</u-section>
			</view>
			<view class="plan-option">
				<u-section title="计划标签" :bold="false" :show-line="false" sub-title="">
						<view slot="right">
							<u-input v-model="addPlanData.lable" type="text" input-align="right" />
						</view>
				</u-section>
			</view>
			<view class="plan-option">
				<u-section title="设置提醒" :bold="false" :show-line="false" sub-title="">
					<view slot="right">
						 <picker @change="remindChange" :value="remindArrIndex" :range="remindArr">
							<view class="uni-input">{{remindArr[remindArrIndex]}}</view>
						 </picker>
					</view>
				</u-section>
			</view>
			<view class="plan-option">
				<u-section title="设置权限" :bold="false" :show-line="false">
					<view slot="right">
						 <picker @change="powerChange" :value="powerIndex" :range="powerList">
							<view class="uni-input">{{powerList[powerIndex]}}</view>
						 </picker>
					</view>
				</u-section>
			</view>
		</view>
		<view class="plan-option-change">
			<view class="plan-option-change-btn" @click="showChangePlan=false" hover-class="small-hover">
				取消
			</view>
			<view class="plan-option-line"></view>
			<view class="plan-option-change-btn" hover-class="small-hover" @click="sendData">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {Plan} from '../../model/plan.js'
	export default {
		name:"plan-change-card",
		data() {
			return {
				powerList:['全部可见','好友可见','仅自己'],
				powerIndex:0,
				remindArr:['每隔1小时提醒','每隔2小时提醒','每隔3小时提醒','每隔4小时提醒'],
				remindArrIndex:0,
				addPlanData:{
					startDate:'',
					endDate:'',
					planName:'',
					planKind:'',
					planDescription:'',
					startTime:'8:00',
					endTime:'17:00',
					lable:'',
					hour:""
				},
			};
		},
		props:['data'],
		mounted() {
			this.addPlanData = {...this.addPlanData,...this.data}
		},
		methods:{
			sendData(e){
				this.$emit('sendData',this.addPlanData);
			},
			powerChange(e){
				const value = e.detail.value;
				this.powerIndex=value;
			},
			remindChange(e){
				const value = e.detail.value;
				this.remindArrIndex=value;
				// 这里还有问题 存储的有中文
				this.$set(this.addPlanData,'hour', this.remindArr[this.remindArrIndex]);
				console.log(this.addPlanData)
			},
			changeEndtTime(e){
				const value = e.detail.value;
				this.$set(this.addPlanData,'endTime', value);
			},
			changeStartTime(e){
				const value = e.detail.value;
				this.$set(this.addPlanData,'startTime', value);
			},
			addPlanBtnClick(){
				this.showChangePlan=true;
			},
		}
	}
</script>

<style lang="scss">
.change-plan-limit {
		padding: 30rpx 42rpx;
	}
	.plan-option{
		margin: 43rpx;
	}
	.plan-option-change{
		display: flex;
		
	}
	.plan-option-change-btn{
		width: 373rpx;
		padding: 29rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.plan-option-line{
		width: 2rpx;
		height: 80rpx;
		background: rgba(0,0,0,0.15);
	}
	.changeBtn {
		background-color: #6d39e9;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 70rpx;
		box-shadow: 0px 2px 8px rgba(109, 57, 233, 0.54);
	}
</style>
